import 'package:basic_ui/constants/app_sizes.dart';
import 'package:basic_ui/localization/string_hardcoded.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:marquee/marquee.dart';
import 'package:sliver_tools/sliver_tools.dart';

import '../widgets/carousel_widgets.dart';

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  final List<String> _imageUrls = [
    'https://img2.baidu.com/it/u=1040306963,1320926731&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    'https://img0.baidu.com/it/u=587565718,4274769845&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
    'https://img2.baidu.com/it/u=2779004009,79424042&fm=253&fmt=auto&app=138&f=JPEG?w=690&h=388',
  ];

  final List<Map<String, String>> _newsList = [
    {'title': 'News 1', 'date': '2025-02-14'},
    {'title': 'News 2', 'date': '2025-02-13'},
    {'title': 'News 3', 'date': '2025-02-12'},
    {'title': 'News 4', 'date': '2025-02-11'},
    {'title': 'News 5', 'date': '2025-02-10'},
    {'title': 'News 6', 'date': '2025-02-09'},
    {'title': 'News 7', 'date': '2025-02-08'},
    {'title': 'News 8', 'date': '2025-02-07'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('首页'),
      ),
      body: Column(
        children: [
          const CarouselWidget(),
          Padding(
            padding: const EdgeInsets.fromLTRB(16.0, 0, 16, 0),
            child: Column(
              children: [
                Container(
                  height: 60,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      _buildActionButton('地铁', Icons.train),
                      VerticalDivider(
                        // 使用竖直方向的Divider
                        width: 1,
                        thickness: 1,
                        indent: 10,
                        endIndent: 10,
                        color: Colors.grey[200],
                      ),
                      _buildActionButton('公交', Icons.directions_bus),
                      VerticalDivider(
                        // 使用竖直方向的Divider
                        width: 1,
                        thickness: 1,
                        indent: 10,
                        endIndent: 10,
                        color: Colors.grey[200],
                      ),
                      _buildActionButton('城际', Icons.train),
                    ],
                  ),
                ),
                gapH12,

                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 0, vertical: 4),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Column(
                                children: [
                                  const Icon(Icons.train, size: 30),
                                  Text('地铁'.hardcoded),
                                ],
                              )),
                        ],
                      ),
                    ],
                  ),
                ),

                gapH12,
                Container(
                  padding: const EdgeInsets.all(4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      _buildMarqueeNotice(),
                      // 宣传图片部分
                      Row(
                        children: [
                          Expanded(
                            child: Image.network(
                              _imageUrls[0], // Reusing the first image for demo
                              width: MediaQuery.of(context).size.width,
                              fit: BoxFit.cover,
                            ),
                          ),
                          const SizedBox(width: 3),
                          Expanded(
                            child: Image.network(
                              _imageUrls[1], // Reusing the first image for demo
                              width: MediaQuery.of(context).size.width,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                gapH24,

                // 新闻部分
                // ListView.builder(
                //   shrinkWrap: true,
                //   physics: const NeverScrollableScrollPhysics(),
                //   itemCount: _newsList.length,
                //   itemBuilder: (context, index) {
                //     final news = _newsList[index];
                //     return ListTile(
                //       title: Text(news['title']!),
                //       subtitle: Text(news['date']!),
                //       trailing: const Icon(Icons.arrow_forward_ios),
                //       onTap: () {
                //         // Handle news item click
                //       },
                //     );
                //   },
                // ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // Helper method to create action buttons
  Widget _buildActionButton(String title, IconData icon) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, size: 30),
        const SizedBox(width: 2),
        Text(title),
      ],
    );
  }
}

// 跑马灯通知
Widget _buildMarqueeNotice() {
  return Container(
    // color: Colors.amber[100],
    padding: const EdgeInsets.symmetric(vertical: Sizes.p8),
    child: SizedBox(
      height: 24,
      child: Marquee(
        text: '欢迎使用InSail Flutter Boot Template，快速高效的项目启动模板！',
        style: const TextStyle(color: Colors.red),
        blankSpace: 50,
        velocity: 50,
      ),
    ),
  );
}
